<template>
	<view>
		<view class="nav_top-bg">
			<u-navbar title="选择地区">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="pop-school-text">
			<view class="d-flex">
				<!-- 左侧省列表 -->
				<scroll-view scroll-y="true" class="scroll-Y">
					<view class="d-flex align-items scroll-width" @click="sheng_go(sheng_list,index)"
						:current="current_sheng" v-for="(sheng_list,index) in sheng_lists" :key="index">
						<view :class="current_sheng == index ? 'sheng_line' : ''"></view>
						<view :class="current_sheng == index ? 'sheng_xz' : 'sheng'">{{sheng_list.name}}</view>
					</view>
				</scroll-view>
				<!-- 中间市列表 -->
				<scroll-view scroll-y="true" class="scroll-shi">
					<view class="d-flex align-items scroll-shi-width" @click="go_shi(shi_list,index)" :current="current_shi"
						v-for="(shi_list,index) in shi_lists" :key="index">
						<view :class="current_shi == index ? 'shi_xz' : 'shi'">{{shi_list.name}}</view>
					</view>
				</scroll-view>
				<!-- 区列表 -->
				<scroll-view scroll-y="true" class="scroll-school">
					<view class="d-flex align-items scroll-xiao-width" @click="go_qu(qu_list,index)"
						:current="current_qu" v-for="(qu_list,index) in qu_lists" :key="index">
						<view :class="current_qu == index ? 'xiao_xz' : 'xiao'">{{qu_list.name}}</view>
						<image class="duigou" v-if="current_qu == index" src="../../static/jianfang/dui.png"
							mode="widthFix"></image>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		tree
	} from '@/api/citys.js'
	export default {
		data(){
			return{
				showSchool: false,
				current_sheng: 100,
				current_shi: 100,
				current_qu: 100,
				sheng_lists: [],
				shi_lists: [],
				qu_lists: [],
				sheng_id:'',
				shi_id:'',
				qu_id: '',
				shiname: '',
				quname: '',
			}
		},
		onLoad() {
			this.getProvinces()
		},
		methods: {
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			
			chooseSchool() {
				this.showSchool = true
			},
			sheng_go(sheng_list, index) {
				console.log("sssssssssssssss", sheng_list, index);
				this.current_sheng = index
				this.sheng_id = sheng_list.id
				let a = [];
				for (let s of sheng_list.children) {
					console.log("11111111111", s);
					a.push({
						name: s.name,
						shi_id: s.id,
						children:s.children,
					})
				}
				console.log("88888888888888888888", a);
				this.shi_lists = a
			},
			// 选择市区之后
			go_shi(shi_list, index) {
				console.log("我我我我我我", shi_list, index);
				this.current_shi = index
				this.shi_id = shi_list.shi_id
				uni.setStorageSync('shi_name', shi_list.name)
				uni.setStorageSync('shi_id', shi_list.shi_id)
				let a = [];
				for (let s of shi_list.children) {
					a.push({
						name: s.name,
						shi_id: s.id
					})
				}
				this.qu_lists = a
				
			},
			// 学校选择
			go_qu(qu_list, index) {
				console.log("选择学校之后", qu_list);
				this.current_qu = index
				this.qu_id = qu_list.id
				this.schoolname = qu_list.name
				this.showSchool = false
				if (typeof this.$util.prePage().get_jianfang == 'function') {
					this.$util.prePage().get_jianfang()
				}
				uni.navigateBack({
					delta: 1
				})
				
			},
			// 获取省市县接口数据
			getProvinces() {
				var data = {
					pid: 0
				}
				tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.sheng_lists = res.data
						// this.columns[1] = res.data[0].children
						// this.columns[2] = res.data[0].children[0].children
					}
			
				})
			},
		}
	}
</script>

<style>
	.choose_school {
		font-size: 34rpx;
		font-weight: 600;
		margin: 20rpx 0 20rpx 20rpx;
		/* margin-left: 20rpx; */
		color: #1D2129;
	}
	.duigou {
		width: 30rpx;
		display: block;
	}
	.scroll-school {
		height: calc(100vh - 100rpx);
		width: 360rpx;
	}
	.scroll-shi-width {
		height: 104rpx;
		width: 240rpx !important;
	}
	
	.scroll-xiao-width {
		height: 104rpx;
		width: 350rpx;
	}
	.xiao_xz {
		width: 330rpx;
		text-align: center;
		color: #165DFF;
		font-size: 28rpx;
	}
	
	.xiao {
		width: 330rpx;
		text-align: center;
		color: #1D2129;
		font-size: 28rpx;
	}
	.sheng_xz {
		width: 144rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		color: #165DFF;
		font-size: 28rpx;
		font-family: 600;
	}
	
	.sheng {
		width: 144rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		text-align: center;
		color: #1D2129;
		font-size: 28rpx;
	}
	.sheng_line {
		width: 2px;
		height: 40rpx;
		background-color: #165DFF;
	}
	.shi_xz {
		width: 180rpx;
		text-align: center;
		color: #165DFF;
		font-size: 28rpx;
	}
	
	.shi {
		width: 180rpx;
		text-align: center;
		color: #1D2129;
		font-size: 28rpx;
	}
	.sheng_line {
		width: 2px;
		height: 40rpx;
		background-color: #165DFF;
	}
	.scroll-width {
		width: 194rpx;
		height: 104rpx;
		background-color: #F7F8FA;
	}
	.pop-school-text {
		width: 690rpx;
	}
	.scroll-Y {
		height: calc(100vh - 100rpx);
		width: 194rpx;
		background-color: #F7F8FA;
	}
</style>